import React, { Component, Fragment } from 'react'
import { Carousel } from 'antd-mobile'

import './Swiper.less'

class Swiper extends Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }

    render() {
        return (
            <Carousel
                autoplay={false}
                infinite
                className="home-swiper"
                dotStyle={{ background: '#fff' }}
                dotActiveStyle={{ background: 'crimson' }}
            >
                {this.state.data.map((val, i) => {
                    return (
                        <Fragment key={val}>
                            <a
                                href="javascript;"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                data-msg={i === 0 ? "今日美图推荐：>>>" : ''}
                            >
                                <img
                                    src={`https://picsum.photos/750/350?${val}`}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        </Fragment>
                    )
                })}
            </Carousel >
        );
    }
}

export default Swiper;